{% load wagtailcore_tags %}

{% if enap_dynav %}

<nav class="enap-dynav" aria-label="Navegação principal">

  {# ── MODO GLOBAL (home) ─────────────────────────────────────────── #}
  {% if enap_dynav_mode == 'global' %}

    <div class="enap-dynav__global">

      <a href="{% pageurl enap_dynav_root %}" class="enap-dynav__logo" aria-label="Ir para a home da ENAP">
        <span class="enap-dynav__logo-text">ENAP</span>
      </a>

      <ul class="enap-dynav__menu" role="list">
        {% for block in enap_dynav.nav_items %}
          {% with section=block.value.page label=block.value.custom_label|default:block.value.page.title %}
            <li class="enap-dynav__menu-item">
              <button
                class="enap-dynav__menu-btn"
                type="button"
                aria-expanded="false"
                aria-controls="dropdown-{{ section.id }}"
                onclick="enapdynav_toggleDropdown(this, 'dropdown-{{ section.id }}')"
              >
                {% if block.value.icon %}<span class="material-icons" aria-hidden="true">{{ block.value.icon }}</span>{% endif %}
                {{ label }}
                <span class="material-icons enap-dynav__chevron" aria-hidden="true">expand_more</span>
              </button>

              <div id="dropdown-{{ section.id }}" class="enap-dynav__dropdown" hidden>
                <ul role="list">
                  {% include "enap_designsystem/blocks/dynamic_nav/render_children.html" with parent=section depth=block.value.show_children_depth %}
                </ul>
              </div>
            </li>
          {% endwith %}
        {% endfor %}
      </ul>

    </div>

  {# ── MODO SECTION / SUBSECTION ─────────────────────────────────── #}
  {% else %}

    <div class="enap-dynav__local">

      <button
        class="enap-dynav__enap-btn"
        type="button"
        aria-expanded="false"
        aria-controls="enap-global-overlay"
        onclick="enapdynav_toggleOverlay()"
        aria-label="Abrir menu global da ENAP"
      >
        <span class="enap-dynav__logo-text">ENAP</span>
        <span class="material-icons enap-dynav__chevron" aria-hidden="true">expand_more</span>
      </button>

      <ul class="enap-dynav__local-menu" role="list">
        {% for pg in enap_dynav_local %}
          <li class="enap-dynav__local-item{% if pg.id == enap_dynav_current.id %} enap-dynav__local-item--active{% endif %}">
            <a href="{% pageurl pg %}" {% if pg.id == enap_dynav_current.id %}aria-current="page"{% endif %}>
              {{ pg.title }}
            </a>
          </li>
        {% endfor %}
      </ul>

    </div>

    {# Overlay do menu global #}
    <div id="enap-global-overlay" class="enap-dynav__overlay" hidden aria-modal="true" role="dialog" aria-label="Menu global da ENAP">
      <div class="enap-dynav__overlay-inner">

        <button class="enap-dynav__overlay-close" type="button" onclick="enapdynav_toggleOverlay()" aria-label="Fechar menu global">
          <span class="material-icons" aria-hidden="true">close</span>
        </button>

        <ul class="enap-dynav__overlay-menu" role="list">
          {% for block in enap_dynav.nav_items %}
            {% with section=block.value.page label=block.value.custom_label|default:block.value.page.title %}
              <li class="enap-dynav__overlay-section">
                <a href="{% pageurl section %}" class="enap-dynav__overlay-section-title">
                  {% if block.value.icon %}<span class="material-icons" aria-hidden="true">{{ block.value.icon }}</span>{% endif %}
                  {{ label }}
                </a>
                <ul class="enap-dynav__overlay-children" role="list">
                  {% include "enap_designsystem/blocks/dynamic_nav/render_children.html" with parent=section depth=block.value.show_children_depth %}
                </ul>
              </li>
            {% endwith %}
          {% endfor %}
        </ul>

      </div>
    </div>

  {% endif %}

</nav>



<style>
  /* ── Navegação Dinâmica ENAP ── base minimalista para testes ────────────── */
  .enap-dynav {
    background: #024248;
    color: #fff;
    font-family: inherit;
  }
  
  /* Global */
  .enap-dynav__global {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1142px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 56px;
  }
  
  .enap-dynav__logo {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
  }
  .enap-dynav__logo-text { letter-spacing: .05em; }
  
  .enap-dynav__menu {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .enap-dynav__menu-btn {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: .9rem;
    padding: .5rem .75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s;
  }
  .enap-dynav__menu-btn:hover,
  .enap-dynav__menu-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.12);
  }
  
  .enap-dynav__chevron {
    font-size: 1.1rem;
    transition: transform .2s;
  }
  [aria-expanded="true"] .enap-dynav__chevron { transform: rotate(180deg); }
  
  /* Dropdown */
  .enap-dynav__menu-item { position: relative; }
  
  .enap-dynav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 1000;
    padding: .5rem 0;
  }
  .enap-dynav__dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .enap-dynav__dropdown-link {
    display: block;
    padding: .5rem 1rem;
    color: #024248;
    text-decoration: none;
    font-size: .9rem;
  }
  .enap-dynav__dropdown-link:hover { background: #f0f7f7; }
  
  /* Local (section / subsection) */
  .enap-dynav__local {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1142px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 56px;
  }
  
  .enap-dynav__enap-btn {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: .4rem .8rem;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
  }
  .enap-dynav__enap-btn:hover,
  .enap-dynav__enap-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.25);
  }
  
  .enap-dynav__local-menu {
    display: flex;
    gap: .125rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
  }
  
  .enap-dynav__local-item a {
    display: block;
    padding: .4rem .75rem;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .9rem;
    border-radius: 4px;
    transition: background .15s, color .15s;
    white-space: nowrap;
  }
  .enap-dynav__local-item a:hover { color: #fff; background: rgba(255,255,255,.1); }
  .enap-dynav__local-item--active a {
    color: #fff;
    border-bottom: 2px solid #70E0DF;
  }
  
  /* Overlay */
  .enap-dynav__overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .enap-dynav__overlay[hidden] { display: none; }
  
  .enap-dynav__overlay-inner {
    background: #fff;
    width: min(480px, 100%);
    height: 100%;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    position: relative;
  }
  
  .enap-dynav__overlay-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #024248;
    font-size: 1.5rem;
  }
  
  .enap-dynav__overlay-menu {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .enap-dynav__overlay-section-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #024248;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    margin-bottom: .5rem;
  }
  .enap-dynav__overlay-section-title:hover { color: #007D7A; }
  
  .enap-dynav__overlay-children {
    list-style: none;
    padding: 0 0 0 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  .enap-dynav__overlay-child-link {
    color: #525258;
    text-decoration: none;
    font-size: .9rem;
  }
  .enap-dynav__overlay-child-link:hover { color: #007D7A; }
  </style>
  
  
  <script>
  /* ── Navegação Dinâmica ENAP — JS mínimo ─────────────────────────────────── */
  function enapdynav_toggleDropdown(btn, id) {
    var dropdown = document.getElementById(id);
    var isOpen = btn.getAttribute('aria-expanded') === 'true';
  
    // Fecha todos os outros dropdowns abertos
    document.querySelectorAll('.enap-dynav__menu-btn[aria-expanded="true"]').forEach(function(b) {
      b.setAttribute('aria-expanded', 'false');
      var otherId = b.getAttribute('aria-controls');
      var other = document.getElementById(otherId);
      if (other) other.hidden = true;
    });
  
    btn.setAttribute('aria-expanded', String(!isOpen));
    dropdown.hidden = isOpen;
  }
  
  function enapdynav_toggleOverlay() {
    var overlay = document.getElementById('enap-global-overlay');
    var btn = document.querySelector('.enap-dynav__enap-btn');
    if (!overlay) return;
  
    var isOpen = !overlay.hidden;
    overlay.hidden = isOpen;
    if (btn) btn.setAttribute('aria-expanded', String(!isOpen));
  
    if (!isOpen) {
      // Foca o botão fechar ao abrir
      var closeBtn = overlay.querySelector('.enap-dynav__overlay-close');
      if (closeBtn) closeBtn.focus();
    }
  }
  
  // Fecha dropdown ao clicar fora
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.enap-dynav__menu-item')) {
      document.querySelectorAll('.enap-dynav__menu-btn[aria-expanded="true"]').forEach(function(b) {
        b.setAttribute('aria-expanded', 'false');
        var id = b.getAttribute('aria-controls');
        var el = document.getElementById(id);
        if (el) el.hidden = true;
      });
    }
  });
  
  // Fecha overlay com Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      var overlay = document.getElementById('enap-global-overlay');
      if (overlay && !overlay.hidden) enapdynav_toggleOverlay();
    }
  });
  </script>
  

{% endif %}